<template>
    <div class="content" v-if="flag">
        
        <h1>列表展示</h1>
        <button @click="$emit('out')">退出登录</button>
        <button @click="$emit('gt')">点击获取列表数据</button>
        <h2>
            <img src="https://img1.baidu.com/it/u=2023780084,2099042627&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888" height="100" alt="">
            昵称：
            <a href="">{{userInfo.nickname}}</a>
        </h2>
        <ul>
            <li v-for="item in list" :key="item._id">
                <b>{{item.name}}</b>
                <button v-has:read="permissionBtns">查看</button>
                <button v-has:edit="permissionBtns">修改</button>
                <button v-has:delete="permissionBtns">删除</button>
                <button v-has:add="permissionBtns">增加</button>
            </li>
        </ul>
    </div>
</template>

<script>
import Vue from "vue";

Vue.directive('has',{
   inserted(el,binding){
    // 按钮权限
    let role = binding.arg;
    // 用户权限
    let userRole = binding.value
    console.log(userRole);

    // 判断用户有没有按钮权限
    let hasRole = userRole.includes(role)
    console.log(hasRole);
    if(!hasRole){
        el.parentNode.removeChild(el)
    }
   }
})

    export default {
        
        props:{
            flag:{
                type:Boolean,
                default(){
                    return flag=false
                }
            },
            userInfo:{
                type:Object
            },
            list:{
                type:Array
            },
            permissionBtns:{
                type:Array
            }
        }
     
        
    }
</script>

<style scoped>
    ul{
        list-style: none;
        padding: 0;
        margin:0;
    }
    li{
        border:2px dashed blue ;
        max-width: 500px;
        margin: 5px;
        padding: 5px;
    }
    button{
        margin: 5px;
    }
</style>